<template>
	<view class="container">
		<map id="map" :longitude="longitude" :latitude="latitude" :scale="scale" :markers="markers"
			@regionchange="resetScale">
			<cover-view class="controls">
				<cover-view class="move" @click="moveCenter()">
					<cover-image src="../../../static/img/move.png"></cover-image>
				</cover-view>
			</cover-view>
		</map>
	</view>
</template>

<script>
	// 引入SDK核心类，js文件根据自己业务，位置可自行放置
	var QQMapWX = require('../qqmap-wx-jssdk.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				id: 0,
				longitude: 0,
				latitude: 0,
				scale: 16,
				markers: [{
					id: 1,
					latitude: 0,
					longitude: 0,
					iconPath: "../../../static/img/marker-.png",
					width: 30,
					height: 30,
					callout: {
						display: "ALWAYS",
						content: " 我 ",
						padding: 5,
						color: "#fff",
						fontSize: 18,
						bgColor: "#3774EC",
						borderRadius: 5
					}
				}],
			}
		},
		methods: {
			// 移动到地图Marker标识的中心
			moveCenter() {
				const mapContext = uni.createMapContext("map", this);
				mapContext.moveToLocation({
					longitude: this.longitude,
					latitude: this.latitude
				})
				this.scale = 16;
			},
			resetScale() {
				this.scale = 15;
			},
			getUserLocation() {
				// 实例化API核心类
				const qqmapsdk = new QQMapWX({
					key: 'MBYBZ-DD2C6-XMRSI-EN5FO-IZU5Z-V7BVR'
				});
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						console.log(res, "获取成功！");
						//  赋值经、纬度
						this.markers[0].latitude = res.latitude;
						this.markers[0].longitude = res.longitude;
						this.longitude = res.longitude;
						this.latitude = res.latitude;
					},
					fail: () => {
						console.log("获取经纬度失败");
					},
					complete: () => {
						// 使用腾讯sdk的reverseGeocoder方法 解析经纬度
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: this.latitude,
								longitude: this.longitude
							},
							success: function(res) {
								console.log("解析地址成功", res);
								console.log("当前地址：", res.result.address);
								//保存缓存
								uni.setStorage({
									key: 'local',
									data: res.result.address,
									success() {
										console.log("用户地址信息已缓存")
									}
								})
							},
							fail: function(res) {
								uni.showToast({
									title: '定位失败',
									duration: 2000,
									icon: "none"
								})
								console.log(res);
							},
							complete: function(res) { //无论成功失败都会执行
							}
						})
					},
				})
			},
			// 生命周期函数--监听页面
			onLoad: function(options) {
				this.getUserLocation()
			},
		}
	}
</script>

<style>
	.container {
		width: 100%;
		padding: 0;
		font-size: 18px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#map {
		width: 100%;
		height: 550px;
	}

	.move,
	.jia,
	.jian {
		width: 30px;
		height: 30px;
	}

	.jia,
	.jian {
		margin-top: 20px;
	}

	.controls {
		width: 10%;
		background-color: #f3f3f3;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
